<template>
  <div class="box">
    <control-size
      :size="size"
      @reduceSize="reduceSize"
      @increaseSize="increaseSize">
    </control-size>
    <div class="my-canvas">
      <data-tree
        :dataSource="dataSource"
        :getAsycDataItems="getAsycDataItems"
        :isCur="true"
        :size="size"
        :RelevanceFormsDataItems="RelevanceFormsDataItems"
        :filterData="filterData"
        :initRelevanceNode="initRelevanceNode"
        :key="treeKey"
        @updateDataSource="updateDataSource"
        @popoverVisible="popoverVisible"
        @relevanceFormsChange="relevanceFormsChange"
        v-drag
      ></data-tree>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Component, Prop, Vue
} from 'vue-property-decorator';
import ControlSize from "./controlSize.vue";
import DataTree from "./dataTree.vue";
import myDrag from "./drag";


@Component({
  name: 'MyCanvas',
  components: {
    ControlSize,
    DataTree,
  }
})

export default class MyCanvas extends Vue {
  @Prop() dataSource!: any;
  @Prop() getAsycDataItems!: Function;
  @Prop() filterData!: Function;
  @Prop() initRelevanceNode!: Function;
  @Prop() RelevanceFormsDataItems!: any[];

  created() {
    myDrag.drag()
  }

  size: any = 100;

  reduceSize() {
    if(this.size > 50)
      this.size -= 10;
  }

  increaseSize() {
    if(this.size < 200)
      this.size += 10;
  }

  treeKey: any = 0;
  updateDataSource() {
    this.treeKey++;
  }

  popoverVisible() {
    this.size = 100;
  }

  relevanceFormsChange(relevanceFormItem, parentSheetCode) {
    this.$emit('relevanceFormsChange', relevanceFormItem, parentSheetCode);
  }
}
</script>

<style lang="less">
.box {
  width: 100%;
  height: 100%;
  background-color: rgba(242,242,242, 0.8);
  .my-canvas {
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, transparent 40px, rgb(235,235,235) 41px),
      -webkit-linear-gradient(left, transparent 40px, rgb(235,235,235) 41px);
    background-size: 41px 41px;
    overflow: hidden;
    position: relative;
  }
}
</style>